<template>
  <div class="one-map">
    <TheMap ref="commmap" />
    <Tool @btnClick="drawArea" />
    <Legend v-if="showLegend"
      :colorRangeVal="colorRange" />
  </div>
</template>

<script>
  import TheMap from './comp/theMap.vue';
  import Tool from './comp/tool.vue';
  import Legend from './comp/legend.vue';
  import { regionVal } from './comp/regionVal.js';
  import { getRegionjson, getColorRange } from '@/utils/map/mapTool.js';

  export default {
    components: {
      TheMap,
      Tool,
      Legend
    },
    data() {
      return {
        colorRange: [],
        showLegend: false
      };
    },
    methods: {
      drawArea(type) {
        switch (type) {
          case 'position':
            this.curClear();
            this.toPosition();
            break;
          case 'heat':
            this.curClear();
            this.setHeat();
            break;
          case 'colour':
            this.curClear();
            this.setColor();
            break;
          case 'colourchart':
            this.curClear();
            this.setColor('showChart');
            break;
          case 'point':
            this.curClear();
            this.$refs.commmap.drawMaker(1000);
            break;
          case 'area':
            this.curClear();
            this.$refs.commmap.toDrawPolygon('once', 1000);
            break;
          case 'line':
            this.curClear();
            this.$refs.commmap.toDrawLine();
            break;
          case 'clear':
            this.curClear();
            break;
          case 'reset':
            this.curClear();
            this.$refs.commmap.toBounds();
            break;
          default:
            break;
        }
      },
      setHeat() {
        const data = {
          max: 8,
          data: [
            { lng: 107.875324, lat: 30.058569, count: 10000 },
            { lng: 102.710593, lat: 30.615671, count: 10500 },
            { lng: 112.269146, lat: 30.976067, count: 9000 },
            { lng: 111.707069, lat: 27.607986, count: 8000 },
            { lng: 106.873762, lat: 26.814457, count: 6000 },
            { lng: 108.871916, lat: 35.196197, count: 4000 }
          ]
        };
        this.$refs.commmap.addHeatMap(data);
      },
      async toPosition() {
        let regionList = [{ code: '530000', level: '1', pcode: '1', name: '云南省', x: '101.487068973782000', y: '24.976868396835600' }];
        let json = await getRegionjson(regionList, 1);
        if (json[0]) {
          this.$refs.commmap.addJsonpr(json[0]);
        }
      },
      async setColor(type) {
        this.showLegend = true;
        let curJson = { json: null, list: regionVal, jsonpr: null };
        this.colorRange = this.setColorRange(regionVal);
        let regionList = [{ code: '1', level: '0', pcode: '', name: '全国', x: '116.409300000000000', y: '40.185300000000000' }];
        let jsonChilds = await getRegionjson(regionList, 2);
        if (jsonChilds[0]) {
          curJson.json = jsonChilds;
          this.$refs.commmap.addColorLayer(curJson, this.colorRange, type);
        }
      },
      setColorRange(list) {
        let orderList = list.sort((a, b) => a.value - b.value);
        let maxVal = orderList[orderList.length - 1].value;
        let colorRangeVals = getColorRange(maxVal, 0, 4);
        return colorRangeVals;
      },
      curClear() {
        this.showLegend = false;
        this.$refs.commmap.clearAll();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .one-map {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style> 